<template>
<div style="height: 100%;width: 100%;overflow-x: hidden;overflow-y: hidden">
  <div class="box top" style="height: 50%">
      <div class="left">
        <div class="bend_head">几何输入参数</div>
          <div class="tend">
            <input class="bend_input" v-model="form.module">
            <span class="text">模数(mm)</span>
          </div>
          <div class="tend">
            <input class="bend_input" v-model="form.press_angle">
            <span class="text" >压力角(°)</span>
          </div>
          <div class="tend">
            <input class="bend_input" v-model="form.tooth">
            <span class="text" >齿数</span>
          </div>
          <div class="tend">
            <input class="bend_input" v-model="form.width">
            <span class="text">接触齿宽(mm)</span>
          </div>
          <div class="tend">
            <input class="bend_input" v-model="form.height">
            <span class="text" >径向接触高度</span>
          </div>
          <div class="tend">
            <select  class="bend_input" v-model="form.fix">
              <option class="u365_input_option" value=1>固定花键</option>
              <option class="u365_input_option" value=2>浮动花键</option>
            </select>
            <span class="text">花键固定方式</span>
          </div>
        <div class="tend">
          <input class="bend_input" v-model="form.D_root">
          <span class="text">外花键齿根圆直径</span>
        </div>
        <div class="tend">
        <input class="bend_input" v-model="form.Di">
        <span class="text">外花键内径</span>
      </div>
        <div class="tend">
          <input class="bend_input" v-model="form.in_D_root">
          <span class="text">内花键齿根圆直径</span>
        </div>
        <div class="tend">
          <input class="bend_input" v-model="form.in_D">
          <span class="text">内花键外径</span>
        </div>

      </div>
      <div class="fir_center">
        <div class="bend_head">载荷输入参数</div>
        <div class="tend">
          <input class="bend_input" v-model="form.torque" style="margin-right: 11%;">
          <span class="text">传递扭矩(Nmm)</span>
        </div>

        <div class="tend">
          <input class="bend_input" v-model="form.n" style="margin-right: 11%;">
          <span class="text">工作转速(rpm)</span>
        </div>

        <div class="tend" >
          <input class="bend_input" v-model="form.Y" style="margin-right: 11%;">
          <span class="text">内花键应力修正系数</span>
        </div>

        <div class="tend">
          <button class="but" @click="loadImg('a')">!</button>
          <input class="bend_input" v-model="form.Ka">
          <span class="text">使用系数</span>
        </div>

        <div class="tend">
          <button class="but"  @click="loadImg('b')">!</button>
          <input class="bend_input" v-model="form.Km">
          <span class="text">齿向载荷分布系数</span>
        </div>
        <div class="tend">
          <button class="but" @click="loadImg('c')">!</button>
          <input class="bend_input" v-model="form.Lf">
          <span class="text">疲劳寿命系数</span>
        </div>
        <div class="tend">
          <button class="but" @click="loadImg('d')">!</button>
          <input class="bend_input" v-model="form.Lw">
          <span class="text">浮动花键磨损寿命系数</span>
        </div>

      </div>
      <div class="right">
        <div class="bend_head">材料参数</div>
        <table class="table">
          <tr>
            <th></th>
          <th>外花键</th>
          <th>内花键</th>
          </tr>
          <tr>
            <td>
              许用剪切应力(Mpa)
            </td>
            <td>
              <input class="bend_input" v-model="form.p_shear_stress" style="float: left;height: 37%;width: 45%;">
                <button class="but"  @click="loadImg('e')" style="float: left;height: 37%;line-height: 100%;width: 25%">!</button>
            </td>
          </tr>
          <tr>
            <td>
              许用压应力(Mpa)
            </td>
            <td>
              <input class="bend_input" v-model="form.p_press_stress" style="float: left;height: 37%;width: 45%;">
            </td>
            <td>
              <input class="bend_input" v-model="form.Fb" style="float: left;height: 37%;width: 45%;">
              <button class="but"  @click="loadImg('f')" style="float: left;height: 37%;line-height: 100%;width: 25%">!</button>
            </td>
          </tr>
          <tr>
            <td>
              许用拉应力(Mpa)
            </td>
            <td></td>
            <td>
              <input class="bend_input" v-model="form.p_tense_stress" style="float: left;height: 37%;width: 45%;">
              <button class="but"  @click="loadImg('g')" style="float: left;height: 37%;line-height: 100%;width: 25%">!</button>
            </td>
          </tr>
        </table>
        <button class="compute" @click="submit">计算</button>
      </div>
  </div>
  <div class="center" style="height: 45%;width: 100%;display: flex">
    <div class="box" style="height:50%;width: 30%;">
      <div class="bend_head">输出结果</div>
      <div style="margin-top: 5%;margin-left: 20%">
        <div style="float: left;text-align: right;padding: 2% 1%">
          <div >外花键齿根剪切安全系数</div>
          <div >外花键齿节圆处剪切安全系数</div>
          <div >外花键齿侧压应力安全系数</div>
          <div >内花键拉应力安全系数</div>
        </div>
        <div style="float: left;padding: 2% 2%">
          <div >{{res.v1}}</div>
          <div >{{res.v2}}</div>
          <div >{{res.v3}}</div>
          <div >{{res.v4}}</div>
        </div>
      </div>
    </div>
    <div class="box" style="height:80%;width: 70%">
      <div class="bend_head">参考数据显示区
      </div>
      <div style="height: 100%;width: 100%; display: flex">
        <img :src="src" class="img">
        <img v-if="img" :src="img" class="img" style="margin-left: 1%;width: 75%">
      </div>

    </div>
  </div>
</div>
</template>

<script>

import {spline_SAE} from "@/api/file";

export default {
name: "spline_SAE",
  created () {
    document.title = '渐开线花键强度校核' //模块中文名
    this.$store.state.file.key = 40 //设置key为自己的页面编号
  },
  data(){
  return{
    src: require("/src/assets/image/image_40.png"),
    img:"",
    form:this.$store.state.file.dataList[40],
    res:{
      v1:"",
      v2:"",
      v3:"",
      v4:""
    }
  }
  },
  methods:{
    loadImg(cas){
      if (cas==='a'){
        this.img=require("/src/assets/image/image_40_03.png");
      }
      else if (cas==='b'){
        this.img=require("/src/assets/image/image_40_02.png")
      }
      else if (cas === 'c'){
        this.img=require("/src/assets/image/image_40_04.png")
      }
      else  if(cas === 'd'){
        this.img=require("/src/assets/image/image_40_01.png")
      }   else  if(cas === 'e'){
        this.img=require("/src/assets/image/image_40_05.png")
      } else  if(cas === 'f'){
        this.img=require("/src/assets/image/image_40_07.png")
      }
      else  if(cas === 'g'){
        this.img=require("/src/assets/image/image_40_06.png")
      }
    },
    submit(){
      spline_SAE(this.form)
          .then(res => {
            console.log(res);
            this.res.v1=res.e;
            this.res.v2=res.f;
            this.res.v3=res.g;
            this.res.v4=res.h;
          })
          .catch(error => {
            console.log(error);
          });
    }
  }

}
</script>

<style scoped>
.box{
  margin: 20px 2%;
  background: #FFFFFF;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.bend_head{
  width: 100%;
  /*height: 31px;*/
  font-size: 17.5px;
  background-color: #D7D7D7;
  border-radius: 3px;
  padding-left: 15px;
  font-weight: bolder;
}

.top{
  height: 50%;
}
.end{
  height: 40%;
}
.center{
  height: 30%;
}
.img{
  height: 71%;
}
.left{
  width: 28%;
  margin: auto 1%;
  float: left;
  height: 100%;
}
.fir_center{
  width: 29%;
  margin-right: 1%;
  float: left;
  height: 100%;
}
.right{
  margin-right: 1%;
  width: 39%;
  float: right;
  height: 100%;
}

.bend_input{
  float: right;
  height: 72%;
  width: 19%;
  text-align: center;
}
.tend{
  height: 9%;
  width: 100%;
}
.text{
  float: right;
  margin-right: 22px;
  display: block;
  letter-spacing: 0;
  text-align: center;
}
.but{
  margin-left: 1%;
  text-align: center;
  width: 10%;
  float: right;
  height: 72%;
  line-height: 72%;


  background-color: #6dd400;
  border-radius: 4px;
  border: 2px #686868;
}
.table{
  margin-left: 20%;
}
.table td{
  height: 10%;
}
.table tr{
  height: 100%;
}
.compute{
  border-radius: 4px;
  border: 2px #686868;

  background: #6dd400;
  width: 104px;
  height: 29px;
  font-size: 18px;
  /*color: #FFFFFF;*/
  letter-spacing: 0;
  text-align: center;
  float: right;
  margin-top: 10%;
}
.sout{

}
</style>
